<template>
  <div class="home">
    <h1>欢迎使用 COAI 智能协同平台</h1>
    <p class="subtitle">基于AI的企业级协同工具</p>
    
    <div class="features">
      <div class="feature-card" @click="navigateTo('/chat')">
        <div class="icon">💬</div>
        <h3>即时通讯</h3>
        <p>实时消息、群组聊天、文件共享</p>
      </div>
      
      <div class="feature-card" @click="navigateTo('/files')">
        <div class="icon">📁</div>
        <h3>文件管理</h3>
        <p>云存储、分片上传、秒传</p>
      </div>
      
      <div class="feature-card" @click="navigateTo('/digital-twin')">
        <div class="icon">🔮</div>
        <h3>数字孪生</h3>
        <p>业务监控、指标分析、决策支持</p>
      </div>
      
      <div class="feature-card" @click="navigateTo('/dashboard')">
        <div class="icon">📊</div>
        <h3>数据看板</h3>
        <p>实时数据、可视化分析</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.home {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 10px;
}

.subtitle {
  text-align: center;
  color: #7f8c8d;
  font-size: 1.2rem;
  margin-bottom: 60px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.feature-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.icon {
  font-size: 3rem;
  margin-bottom: 15px;
}

.feature-card h3 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 10px;
}

.feature-card p {
  color: #7f8c8d;
  font-size: 0.9rem;
}
</style>
